<!-- 订单处理自提/配送 -->
<template>
  <ContainerSlot>
    <template slot="searchModule">
      <SearchForm :labelWidth="labelWidth" :formConfig="formConfig" :formData="formData" :slotList="slotList"
        ref="ruleForm">
        <template slot="searchBtn">
          <el-button type="primary" @click.prevent="() => { page = 1, queryPageList() }">查询</el-button>
        </template>
        <template slot="resetBtn">
          <el-button @click.prevent="() => { page = 1, resetForm() }">重置</el-button>
        </template>
      </SearchForm>
    </template>
    <!-- <template slot="operationModule">
      <el-button class="optBtn" type="primary" plain @click="addData">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加</span>
      </el-button>
      <el-button class="optBtn" type="danger" plain @click="delSelectData">
        <i class="el-icon-delete"></i>
        <span>删除</span>
      </el-button>
    </template> -->
    <template slot="contentModule">
      <Table :propList="propList" v-loading="loading" :listData="tableData"
        @handleSelectionChange="handleSelectionChange">
        <template v-slot:avatar="{ row }">
          <el-avatar icon="el-icon-user-solid" :src="row.avatar" />
        </template>
        <template v-slot:goodsStatus="{ row }">
          <span style="color: #999999;" v-if="row.status === 'Cancel'">已取消</span>
          <span style="color: #ffab04;" v-if="row.status === 'WaitForShipped'">待发货</span>
          <span style="color: #45bd12;" v-if="row.status === 'WaitForReceipt'">待收货</span>
          <span style="color: #0899e7;" v-if="row.status === 'Complete'">已完成</span>
          <span style="color: #ffab04;" v-if="row.status === 'Return'">退货商品</span>
        </template>
        <template v-slot:operation="{ row }">
          <template v-if="!row['$index']">
            <!-- <el-button class="optBtn" type="" plain @click="editData(row)">
              <i class="el-icon-edit-outline"></i>
              <span>修改</span>
            </el-button>
            <el-button class="optBtn" type="danger" plain @click="delData(row.ordersId)">
              <i class="el-icon-delete"></i>
              <span>删除</span>
            </el-button> -->
            <el-button v-if="row.status == 'WaitForShipped'" class="optBtn" type="primary" plain
              @click="dispose(row.ordersId)">
              <i class="el-icon-finished"></i>
              <span>处理</span>
            </el-button>
            <el-button v-else class="optBtn" type="info" disabled>
              <i class="el-icon-finished"></i>
              <span>处理</span>
            </el-button>
          </template>
        </template>
        <template v-slot:goodsInfo="{ row }">
          <span v-if="!row['$index']" style="color: #1b7ee3; cursor: pointer;" @click="checkGoods(row)">查看商品</span>
        </template>
      </Table>
      <el-dialog :close-on-click-modal='false' title="提示" :visible.sync="dialogVisible" width="50%"
        :before-close="handleClose">
        <el-table :data="goodsData" border style="width: 100%">
          <el-table-column prop="productName" label="商品名称">
          </el-table-column>
          <el-table-column prop="price" label="单价">
          </el-table-column>
          <el-table-column prop="amount" label="数量">
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </template>
    <template slot="footerModule">
      <el-pagination @current-change="handleCurrentChange" background layout=" prev, pager, next, jumper" :total="total">
      </el-pagination>
    </template>
    <template slot="dialog">
      <AddEdit :showDialog="showDialog" :userList="userList" :productList="productList" :formData="editFormData"
        :api="api" @closeDialog="closeDialog" />
    </template>
  </ContainerSlot>
</template>

<script>
import ContainerSlot from '@/components/Container'
import SearchForm from '@/components/Form'
import Table from '@/components/Table'
import CategoryBar from "@/components/CategoryBar";
import { propList, formConfig, categoryList } from './pageConfig'
import AddEdit from './components/addEdit.vue'
//api
import ArtificialOrderManagement from '@/api/module/artificial-order-management'
import AgriculturalSortManagement from '@/api/module/agricultural-sort-management'
import SystemUserManagement from '@/api/module/system-user-management'
export default {
  name: '',
  components: { ContainerSlot, SearchForm, Table, CategoryBar, AddEdit },
  computed: {
    propList () {
      return propList
    },
    formConfig () {
      return formConfig
    },
    categoryList () {
      return categoryList
    },
    productListData () {
      return productListData
    }
  },
  data () {
    return {
      loading: false,
      api: ArtificialOrderManagement.add,
      dialogVisible: false,
      showDialog: false,
      routerIndex: 1,
      total: 10,
      currentPage: 2,
      pageSize: 10,
      tableData: [],
      userList: [],
      slotList: [
        { slotName: 'searchBtn' },
        { slotName: 'resetBtn' }
      ],
      // 表单域标签的宽度
      labelWidth: '150px',
      formData: {},
      editFormData: {},
      goodsData: [],
      productList: [],
      idList: []
    }
  },
  mounted () {
    this.getFormData()
  },
  methods: {
    checkGoods (row) {
      this.dialogVisible = true
      this.goodsData = row.ordersItemList
    },
    handleClose () {
      this.dialogVisible = false
    },

    //获取表单下拉数据
    getFormData () {
      this.loading = true
      Promise.all([
        SystemUserManagement.queryByCondition({ userType: "custom_user" }),  //获取用户
        AgriculturalSortManagement.queryByCondition({})//获取所有商品
      ]).then(res => {
        this.loading = false
        this.userList = res[0].data
        this.productList = res[1].data
        this.queryPageList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '数据请求错误!'
        });
      })
    },
    //添加数据
    addData () {
      this.showDialog = true
      this.editFormData = {}
      this.api = ArtificialOrderManagement.add  //添加接口
    },
    //编辑数据
    editData (data) {
      this.showDialog = true
      this.editFormData = JSON.parse(JSON.stringify(data))
      this.api = ArtificialOrderManagement.edit //编辑接口
    },
    //关闭（添加编辑）弹窗
    closeDialog (isRef) {
      this.showDialog = false
      isRef && this.queryPageList()
    },
    //处理订单
    dispose (id) {
      ArtificialOrderManagement.dealPickupOrders({
        "ordersId": id
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '处理成功!'
          });
          this.queryPageList()
        } else {
          this.$message({
            type: 'info',
            message: '处理失败!'
          });
        }
      })
    },
    //删除数据
    delData (id) {
      this.$confirm('您确定删除这条订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ArtificialOrderManagement.del(id).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //删除数据
    delSelectData () {
      if (!this.idList.length) {
        return
      }
      this.$confirm('您确定删除该数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ArtificialOrderManagement.delList(this.idList).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          } else {
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //列表查询
    queryPageList () {
      this.loading = true
      let params = {
        page: this.page,
        size: 10,
        condition: {
          ...this.formData,
          manualFlag: false,   //客户端订单
          deliveryMethod: '2'  //自提/配送
        }
      }
      ArtificialOrderManagement.queryPageByCondition(params).then(res => {
        this.loading = false
        if (res.code == 200) {
          this.tableData = res.data.content
          this.tableData.forEach(data => {
            let userInfo = this.userList.filter(userInfo => { return data.userId == userInfo.userId })[0]
            data.nickName = userInfo ? userInfo.nickName : ''
          });
          this.total = Number(res.data.totalElements)
        } else {
          this.tableData = []
        }
        if (this.tableData.length == 0) {
          this.$message({
            type: 'success',
            message: '暂无数据!'
          });
        }
      })
    },
    //修改用户状态
    editStatus (data) {
      this.$confirm('您确定要修改该角色的启用状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ArtificialOrderManagement.updateStatus({
          'id': data.roleId,
          'status': data.status
        }).then(res => {
          if (res.code == 200) {
            this.queryPageList()
            this.$message({
              type: 'success',
              message: '修改成功!'
            });
          } else {
            data.status = data.status == '1' ? '0' : '1'
            this.$message({
              type: 'info',
              message: res.msg
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    handleSelectionChange (data) {
      this.idList = []
      data.forEach(item => {
        item.ordersId && this.idList.push(item.ordersId)
      });
    },
    handleCurrentChange (e) {
      this.page = e
      console.log(e)
    },
    resetForm () {
      console.log('重置')
      this.$refs.ruleForm.resetForm();
      this.queryPageList()
    }
  }
}
</script>

<style lang="scss" scoped></style>

